page {
	width: 100%;
	height: 100%;
  }
  
  #app {
	background-size: 100%;
	width: 100%;
	min-height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
  
	.flex {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 90%;
	  margin: 0 auto;
	}
  }
  
  .top {
	width: 90%;
	margin: 0 auto;
	height: 450rpx;
  
	.title {
	  padding-top: 210rpx;
	  font-family: PingFangSC;
	  color: $uni-bg-color;
	  font-weight: $uni-font-weight;
	  font-size: 54rpx;
	  margin-bottom: 20rpx;
	}
  
	text {
	  font-size: 30rpx;
	  color: $uni-bg-color;
	}
  }
  
  .middle {
	width: 100%;
	height: calc(100vh - 450rpx);
	// overflow: hidden;
	background: $uni-bg-color;
	border-radius: 40rpx 40rpx 0 0;
	margin: 0 auto;
  
	.form-box {
	  font-size: 30rpx;
	  height: 116rpx;
  
	  .name {
		color: #333;
		font-size: 34rpx;
		font-family: PingFangSC;
		font-weight: $uni-font-weight;
		position: relative;
  
		
	  }
      .active{
        &::after {
		  content: "";
		  position: absolute;
		  bottom: -6rpx;
		  left: 16%;
		  z-index: 2;
		  width: 98rpx;
		  height: 14rpx;
		  border-radius: 5px;
		  background-color: rgba(0, 56, 247, 0.5);
  
		}
      }
	  .jumplogin {
		color: #666;
  
		text {
		  color: $uni-color-primary
		}
	  }
	}
  }
  
  .content {
	width: 90%;
	margin: 0 auto;
	:deep(.uni-forms-item.is-direction-left){
		flex-direction: column;
		position: relative;
		margin-bottom: 30rpx !important;
		.uni-forms-item__label{
			width: 100% !important;
		color: $uni-text-color !important;
		font-weight: 500 !important;
		font-size: 28rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;}
		.uni-forms-item__error {
			right: 6rpx !important;
			left: auto !important;
		}
	}	
	.uni-easyinput__content-input{height: 88rpx !important;
		border-radius: 8px;
		background-color: #F4F6FA;
		width: 96%;
		line-height: 90rpx;
		color: #333;
		font-size: $uni-font-size-base;
		padding-left: 20rpx;}
		.code-btn-start{
			position: absolute;
		right: 14rpx;
		width: 200rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: $uni-font-size-base;
		color: $uni-bg-color;
		border-radius: 32rpx;
		z-index: 99;
		background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
		border: none;
		}
		.submit {
	  width: 100%;
	  height: 88rpx;
	  color: $uni-bg-color;
	  font-family: PingFangSC;
	  color: #FFFFFF;
	  font-weight: 500;
	  font-size: $uni-font-size-big;
	  padding: 0;
	  margin: 28rpx 0 20rpx 0;
	  border-radius: 50px;
	  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
	  border: none;
	}
  }
  
  .agreement {
	font-family: PingFangSC;
	color: #999;
	font-weight: 500;
	font-size: 26rpx;
  
	.radio {
	  display: flex;
	  justify-content: center;
  
	  view {
		margin-left: 50rpx;
  
		text {
		  color: $uni-color-primary;
		}
	  }
  
	  .is-checked {
		width: 8rpx;
		height: 8rpx;
	  }
	}
  }
  .row{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:20rpx 0 70rpx 0;
    view{
      color: $uni-color-primary;
      font-size: 22rpx;
      font-weight: 500;
    }
  }

  .line{
    width: 100%;
    height: 2rpx;
    background: #eaeaea;
    position: relative;
    margin: 55rpx 0;
    view{
      font-family: PingFangSC;
      color: #CCCCCC;
      font-weight: 400;
      font-size: 30rpx;
      content: '';
      position: absolute;
      top: -18rpx;
      z-index: 99;
      left: 40%;
      width: 120rpx;
      height: 60rpx;
      text-align: center;
      background: $uni-bg-color;
    }  
  }
 .content{
  .WXsubmit{
    color: $uni-color-primary;
		background: #e6ecfe;
		border: none;
	&::after{border: none;}
  }
 } 
 .shake {
	animation: shake 0.05s linear 4 alternate;
}
@keyframes shake {
	from {
		transform: translateX(-10rpx);
	}

	to {
		transform: translateX(10rpx);
	}
}
